<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import axios from 'axios'
import buttonVue from '../button/button1.vue';
import { useTestStore } from '../../stores/test.js'
import { useRouter } from 'vue-router'
import { h } from 'vue'
import { ElMessage } from 'element-plus'
import $ from 'jquery/dist/jquery'
import jwt_decode from "jwt-decode";

const currentInstance = getCurrentInstance()
// 插件
const drawer2 = ref(false)
const direction = ref('btt')//展示方向
const size = ref(450)

const store = useTestStore()
const router = useRouter();

const accountList = ref('')//已绑定卡的信息
const noBounded = ref('')//未绑定卡的信息
const cardBindNumber = ref('')//要绑定的卡号

const isAcountList = ref(false)
const isNoBound = ref(false)


const open = (msg) => {
    ElMessage(msg)
}

defineOptions({
    inheritAttrs: false
})
// 展示已绑定的卡
function getCardsBound() {
    let token = jwt_decode(localStorage.getItem("token"))
    if (token == null) {
        token = jwt_decode(localStorage.getItem("longToken"))
    }
    axios.get('http://192.168.110.221:8080/user/queryBindAccountListController', {
        params: {
            token: localStorage.getItem("token"),
            longToken: localStorage.getItem("longToken"),
            userId: token.userId,
            userNumber: token.userNumber,
        }
    })
        .then((resp) => {
            if (resp.data.code == 200) {
                if (resp.data.datas != '') {
                    accountList.value = resp.data.datas;
                    isAcountList.value = true;
                }

            } else if (resp.data.code == 400) {
                open("非法访问")
            }
        })
        .catch((e) => {
            console.log(e);
            open("出现了一些意料之外的错误")
        })
}
// 已绑定卡展示
onMounted(() => {
    getCardsBound()
})
function show(cardType, accountNumber) {
    if (cardType == "信用卡") {
        store.accountNumber = accountNumber
        router.push('/card-info-credit')
    }else{
        store.accountNumber = accountNumber
        router.push('/card-info')
    }
}
//取消按钮
function cancelClick() {
    drawer2.value = false
    if(currentInstance.ctx.$refs.test!=null){
    for (let i = 0; i < currentInstance.ctx.$refs.test.length; i++) {
        currentInstance.ctx.$refs.test[i].style.backgroundColor = "#67CBFD"
        currentInstance.ctx.$refs.test[i].style.boxShadow = "none"
    }}
}
// 未绑定卡展示
function showCard() {
    drawer2.value = true
    let token = jwt_decode(localStorage.getItem("token"))
    if (token == null) {
        token = jwt_decode(localStorage.getItem("longToken"))
    }
    axios.get("http://192.168.110.221:8080/user/queryNoBindAccountController", {
        params: {
            token: localStorage.getItem("token"),
            longToken: localStorage.getItem("longToken"),
            userId: token.userId,
            userNumber: token.userNumber,
        }
    })
        .then((resp) => {
            if (resp.data.code == 200) {
                noBounded.value = resp.data.datas
                if (noBounded.value == '') {
                    isNoBound.value = false
                }else{
                    isNoBound.value = true
                }
            } else{
                open(resp.data.msg)
            }
        })
        .catch((err) => {
            console.log(err);
            open("出现了一些意料之外的错误")
        })
}
//未绑定卡的点击事件及样式
function cardBindClick(cardNum, index) {
    cardBindNumber.value = cardNum
    currentInstance.ctx.$refs.test[index].style.backgroundColor = "#1bacf5"
    currentInstance.ctx.$refs.test[index].style.boxShadow = "1px 1px 10px 5px lightblue"
    for (let i = 0; i < currentInstance.ctx.$refs.test.length; i++) {
        if (i != index) {
            currentInstance.ctx.$refs.test[i].style.backgroundColor = "#67CBFD"
            currentInstance.ctx.$refs.test[i].style.boxShadow = "none"
        }
    }
}
// 进行绑定银行卡事件
function cardBind() {
    if (cardBindNumber.value == "") {
        cancelClick()
    } else {
        let token = jwt_decode(localStorage.getItem("token"))
        if (token == null) {
            token = jwt_decode(localStorage.getItem("longToken"))
        }
        axios.get("http://192.168.110.221:8080/user/bindCardController", {
            params: {
                token: localStorage.getItem("token"),
                longToken: localStorage.getItem("longToken"),
                userId: token.userId,
                userNumber: token.userNumber,
                accountNumber: cardBindNumber.value
            }
        })
            .then((resp) => {
                if (resp.data.code == 200) {
                    open('绑定成功')
                    cancelClick()
                    getCardsBound()
                } else if (resp.data.code == 400) {
                    open("绑定失败")
                }
            })
            .catch((err) => {
                open("出现了一些意料之外的错误")
            })
    }
}

</script>

<template>
    <div class="info-box">
        <h1>
            <span class="iconfont">&#xe619;</span>
            <span class="title">已绑定的银行卡</span>
        </h1>
        <div>
            <li v-for="a in accountList" @click="show(a.accountType, a.accountNumber)">
                <p>卡号:<span>{{ a.accountNumber }}</span></p>
                <p>类型:<span>{{ a.accountType }}</span></p>
                <p>当前状态:<span>{{ a.isDefault  == 1 ? '可用' : '不可用'  }}</span></p>
            </li>
            <li v-if="!isAcountList">
                <p>暂无绑定银行卡信息</p>
            </li>



            <!-- 插件 -->
            <!-- :before-close="handleClose" 关闭之前的操作 -->

            <el-drawer v-model="drawer2" :direction="direction" :size="size" :before-close="cancelClick">

                <!-- 头部 -->
                <template #header>
                    <h4>可绑定的银行卡</h4>
                </template>

                <!-- 主体 -->
                <template #default>
                    <li v-for="(n, index) in noBounded" @click="cardBindClick(n.accountNumber, index)" ref="test"
                        class="nnn">
                        <p>卡号:<span>{{ n.accountNumber }}</span></p>
                        <p>类型:<span>{{ n.cardType != null ? n.cardType : '信用卡' }}</span></p>
                        <p>当前状态:<span>{{ n.accountStatus  == 1 ? '可用' : '不可用'}}</span></p>
                    </li>
                    <li v-if="!isNoBound" style="background-color: #FFF;color: #bbbbbb;text-align: center;">
                        <p>暂无绑定银行卡信息</p>
                    </li>
                </template>

                <!-- 底部 -->
                <template #footer>
                    <div style="flex: auto" class="mb-4">
                        <el-button style="width: 50px;" @click="cancelClick()">取消</el-button>
                        <el-button type="primary" style="width: 50px;" @click="cardBind">确认</el-button>
                    </div>
                </template>
            </el-drawer>
        </div>
    </div>
    <buttonVue btn-color="#0278FE" btn-name="+ 增加银行卡" @click="showCard()"></buttonVue>
</template>

<style scoped>
.active {
    background-color: red !important;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 30px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    color: #1058f3;
}

.info-box {
    margin: 10px 10px 10px;
    background-color: #fff !important;
    border-radius: 10px;
    padding: 10px
}

.info-box::after {
    display: block;
    content: "";
    clear: both;
}

h1 {
    font: normal 600 16px 'Serif';
    margin-left: 3%;
    margin-top: 5px;
}

.title {
    height: 30px;
    line-height: 30px;
    vertical-align: bottom;
    margin-left: 20px;
}

li {
    width: 94%;
    margin: 10px auto;
    border-radius: 5px;
    padding: 3px 5px;
    background-color: #67CBFD;
    color: #fff;
}

li p {
    padding: 2px 0;
}

li p span {
    margin-left: 10px;
}
</style>